<template>
  <div>
    <div class="Settings">
      <h1>个人信息</h1>
      <div class="Settings-one">
        <div>账号：</div>
        <div>{{userMsg.account}}</div>
      </div>
      <div class="Settings-one">
        <div class="name">用户名：</div>
        <div>
          <el-input
            style="width:200px;margin-top:10px"
            v-model="nickname"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <!-- 密码 -->
      <div class="Settings-one">
        <div class="name">密码：</div>
        <div>
          <el-input
            style="width:200px;margin-top:10px"
            type="password"
            v-model="password"
            placeholder="请输入密码"
          ></el-input>
        </div>
      </div>

      <!-- 姓名 -->
      <div class="Settings-one">
        <div class="name">真实姓名：</div>
        <div>
          <el-input
            style="width:200px;margin-top:10px"
            v-model="realName"
            placeholder="请输入真实姓名"
          ></el-input>
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="Settings-one">
        <div class="name">联系方式：</div>
        <div>
          <el-input
            style="width:200px;margin-top:10px"
            
            v-model="mobile"
            placeholder="请输入联系方式"
          ></el-input>
        </div>
      </div>
      <el-row class="buy">
        <el-button @click="repairid" type="primary">修改</el-button>
        
      </el-row>
    </div>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { repair } from "@/api/user";
import qs from "qs";
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      nickname: "",
      password: "",
      realName:"",
      mobile:""
      
    };
  },
  methods:{
    repairid(){
       let data = qs.stringify({
       id:this.userMsg.id,
       status:this.userMsg.status,
       password:this.password,
       nickname:this.nickname,
       realName:this.realName,
       mobile:this.mobile
      });
      repair(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.$message.error("修改成功")
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }
  },
 
  computed: {
    
    ...mapState(["userMsg"]),
  
  }
};
</script>
<style lang="less" scoped>
.Settings {
  width: 25%;
  margin: 100px 200px;
  .Settings-one {
    display: flex;
    padding-top: 10px;
    .name {
      margin-top: 20px;
    }
    div:nth-child(1) {
      font-size: 16px;
      color: #333333;
      flex: 0.5;
    }
    div:nth-child(2) {
      font-size: 16px;
      color: #333333;
      flex: 0.5;
    }
  }
}
.buy {
  display: flex;

  margin-top: 40px;
}
</style>